<!--  -->
<template>
    <div class='' v-loading="loading" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.1)">
        <div class="item">
            <el-form ref="headerForm" :model="form" label-width="120px" :rules="rules">
                <el-form-item label="司机姓名" prop="user_name">
                    <el-input class="custom-input" type="text" v-model="form.user_name"
                        placeholder="请输入发货方电话"></el-input>
                </el-form-item>
                <el-form-item label="驾驶证号" prop="jszh">
                    <el-input class="custom-input" type="text" v-model="form.jszh" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="驾驶证发证机关" prop="IssueUnit">
                    <el-input class="custom-input" type="text" v-model="form.IssueUnit" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="驾驶证到期" prop="driver_end_date">
                    <el-input class="custom-input" type="text" v-model="form.driver_end_date" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="sfz">
                    <el-input class="custom-input" type="text" v-model="form.sfz" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="身份证到期" prop="id_end_date">
                    <el-input class="custom-input" type="text" v-model="form.id_end_date" placeholder=""></el-input>
                </el-form-item>
            </el-form>

            <div class="imgs-box">
                <div class="box">
                    <div>身份证正面：</div>
                    <!-- <el-image-custom style="width: 300px; height: 250px" :src="form.sfzimgz" :fit="'cover'"
                        :preview-src-list="[form.sfzimgz]" :viewerCustom="true"></el-image-custom> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.sfzimgz"
                        :fit="'cover'" :preview-src-list="[form.sfzimgz]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'sfzimgz'" @getImageList="getImageList"
                            :imageList="[form.sfzimgz]">
                        </uploadImgPrevDriver>
                    </div>
                    <!-- viewerCustom使用自定义的预览 -->
                    <div class="info-box">
                        <el-form ref="form1" :model="form" label-width="80px" size="mini">
                            <el-form-item label="姓名">
                                <el-input v-model="form.json1.Name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-input v-model="form.json1.Gender"></el-input>
                            </el-form-item>
                            <el-form-item label="民族">
                                <el-input v-model="form.json1.Nationality"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号">
                                <el-input v-model="form.json1.IDNumber"
                                    @input="(value) => modelInput(value, 1)"></el-input>
                            </el-form-item>
                            <el-form-item label="出生日期">
                                <el-input v-model="form.json1.BirthDate"></el-input>
                            </el-form-item>
                            <el-form-item label="地址">
                                <el-input v-model="form.json1.Address"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input readonly v-model="form.mobile"></el-input>
                            </el-form-item>
                          
                        </el-form>
                    </div>

                </div>
                <div class="box">
                    <div>身份证反面：</div>
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.sfzimgb"
                        :fit="'cover'" :preview-src-list="[form.sfzimgb]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'sfzimgb'" @getImageList="getImageList"
                            :imageList="[form.sfzimgb]">
                        </uploadImgPrevDriver>
                    </div>
                    <div class="info-box">
                        <el-form ref="form1" :model="form" label-width="80px" size="mini">
                            <el-form-item label="起始日期">
                                <el-input v-model="form.json.StartDate"></el-input>
                            </el-form-item>
                            <el-form-item label="到期日期">
                                <el-input v-model="form.json.EndDate"
                                    @input="(value) => modelInput(value, 2)"></el-input>
                            </el-form-item>
                            <el-form-item label="签发机关">
                                <el-input v-model="form.json.Issue"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="box">
                    <div>驾驶证正面：</div>
                    <!-- <el-image style="width: 300px; height: 250px" :src="form.jszz" :fit="'cover'"
                        :preview-src-list="[form.jszz]"></el-image> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.jszz"
                        :fit="'cover'" :preview-src-list="[form.jszz]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'jszz'" @getImageList="getImageList" :imageList="[form.jszz]">
                        </uploadImgPrevDriver>
                    </div>
                    <div class="info-box">
                        <el-form ref="form1" :model="form" label-width="80px" size="mini">
                            <el-form-item label="起始日期">
                                <el-input v-model="form.json2.StartDate"></el-input>
                            </el-form-item>
                            <el-form-item label="结束日期">
                                <el-input v-model="form.json2.expiringDate"
                                    @input="(value) => modelInput(value, 3)"></el-input>
                            </el-form-item>
                            <el-form-item label="注册日期">
                                <el-input v-model="form.json2.IssueDate"></el-input>
                            </el-form-item>
                            <el-form-item label="驾驶证号">
                                <el-input v-model="form.json2.LicenseNumber"
                                    @input="(value) => modelInput(value, 4)"></el-input>
                            </el-form-item>
                            <el-form-item label="地址">
                                <el-input v-model="form.json2.Address"></el-input>
                            </el-form-item>
                            <el-form-item label="准驾车型">
                                <el-input v-model="form.json2.VehicleType"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-input v-model="form.json2.Gender"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="form.json2.Name"></el-input>
                            </el-form-item>
                            <el-form-item label="发证机关">
                                <el-input v-model="form.json2.IssueUnit"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>

                </div>
            </div>

            <div class="imgs-box">
                <div class="box" style="width: 30%;">
                    <div>驾驶证附页正面：</div>
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.jszfz"
                        :fit="'cover'" :preview-src-list="[form.jszfz]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'jszfz'" @getImageList="getImageList" :imageList="[form.jszfz]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;">
                    <div>驾驶证附页反面：</div>
                    <!-- <el-image style="width: 300px; height: 250px" :src="form.jszfb" :fit="'cover'"
                        :preview-src-list="[form.jszfb]"></el-image> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.jszfb"
                        :fit="'cover'" :preview-src-list="[form.jszfb]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'jszfb'" @getImageList="getImageList" :imageList="[form.jszfb]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
                <div class="box" style="width: 30%;">
                    <div>从业资格证：</div>
                    <!-- <el-image style="width: 300px; height: 250px" :src="form.cyzgz" :fit="'cover'"
                        :preview-src-list="[form.cyzgz]"></el-image> -->
                    <el-image-custom v-if="form.status == 1" style="width: 300px; height: 250px" :src="form.cyzgz"
                        :fit="'cover'" :preview-src-list="[form.cyzgz]" :viewerCustom="true"></el-image-custom>
                    <div class="block" v-else style="width: 300px; height: 250px">
                        <uploadImgPrevDriver :textType="'cyzgz'" @getImageList="getImageList" :imageList="[form.cyzgz]">
                        </uploadImgPrevDriver>
                    </div>
                </div>
            </div>
        </div>

        <div class="dialog-footer" v-if="form.status == 0 || form.status == 2 || form.status == 3">
            <!-- <el-button type="danger" @click="$emit('save', { ...form, status: 2 })">不通过</el-button> -->
            <el-button type="danger" @click="submitForm('headerForm', 2)">不通过</el-button>
            <el-button type="primary" @click="submitForm('headerForm', 1)">通过</el-button>
        </div>
    </div>
</template>

<script>

import uploadImgPrev from "@/components/uploadImgPrev/index.vue";
import uploadImgPrevDriver from "@/components/uploadImgPrevDriver/index.vue";
import axios from "axios";
import { getHeader } from '@/utils/tool';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        uploadImgPrev,
        uploadImgPrevDriver
    },
    props: ['form'],
    data() {
        //这里存放数据
        return {
            rules: {
                user_name: [
                    { required: true, message: '请输入司机姓名', trigger: 'blur' },
                ],
                jszh: [
                    { required: true, message: '请输入驾驶证号', trigger: 'blur' }
                ],
                IssueUnit: [
                    { required: true, message: '请输入驾驶证发证机关', trigger: 'blur' }
                ],
                driver_end_date: [
                    { required: true, message: '请输入驾驶证到期', trigger: 'blur' }
                ],
                sfz: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' }
                ],
                id_end_date: [
                    { required: true, message: '请输入身份证到期', trigger: 'blur' }
                ]
            },
            loading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
    },
    //方法集合
    methods: {
        submitForm(formName, status) {
            if (status == 2) {
                this.$emit('reject', { id: this.form.id, user_id: this.form.user_id });
                return;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (status == 1) {
                        this.$emit('save', { ...this.form, status })
                    }
                } else {
                    this.$message.error('请输入车主信息')
                    return false;
                }
            });
        },
        modelInput(val, type) {
            // type 1身份证号   2到期日期  3结束日期  4驾驶证号 
            if (type == 1) {
                this.form.sfz = val;
            } else if (type == 2) {
                this.form.id_end_date = val;
            } else if (type == 3) {
                this.form.driver_end_date = val;
            } else if (type == 4) {
                this.form.jszh = val;
            }
        },
        getImageList(list, index) {
            console.log(list[0], "21312313213");
            if (list[0].name == 'sfzimgb') {
                this.loading = true;
                this.form.sfzimgb = list[0].url;
                axios({
                    url: `https://api.zhgylgl.com/api/common/idCardIdentification?img=${list[0].url}&type=1`,
                    methods: 'get',
                    headers: getHeader()
                }).then(res => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        this.form.json = res.data.data
                    }
                })
            } else if (list[0].name == 'sfzimgz') {
                this.loading = true;
                this.form.sfzimgz = list[0].url;
                axios({
                    url: `https://api.zhgylgl.com/api/common/idCardIdentification?img=${list[0].url}&type=0`,
                    methods: 'get',
                    headers: getHeader()
                }).then(res => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        this.form.json1 = res.data.data
                    }
                })
            } else if (list[0].name == 'jszz') {
                this.loading = true;
                this.form.jszz = list[0].url;
                axios({
                    url: `https://api.zhgylgl.com/api/common/idCardIdentification?img=${list[0].url}&type=2`,
                    methods: 'get',
                    headers: getHeader()
                }).then(res => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        let { address, approvedDrivingModel, birthTime, expiringDate, idCardNumber, issueDate, issueUnit, nationality, sex, userName, validFromTime } = res.data.data;
                        this.form.json2 = {
                            StartDate: birthTime,
                            EndDate: expiringDate,
                            IssueDate: validFromTime,
                            LicenseNumber: idCardNumber,
                            Address: address,
                            VehicleType: approvedDrivingModel,
                            Gender: sex,
                            Name: userName,
                            IssueUnit: issueUnit
                        }
                        this.form.IssueUnit = issueUnit;
                    } else {
                        this.$message.error('识别失败!')
                    }
                })
                // json2
            } else if (list[0].name == 'jszfz') {
                this.form.jszfz = list[0].url;
            } else if (list[0].name == 'jszfb') {
                this.form.jszfb = list[0].url;
            } else if (list[0].name == 'cyzgz') {
                this.form.cyzgz = list[0].url;
            }
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        if (this.form.IssueUnit == "") {
            this.form.IssueUnit = this.form.json2.IssueUnit;
        }
        if(this.form.json2.expiringDate == '长期'){
            this.form.driver_end_date = '长期'
        }
        if (!(this.form.json) || Object.values(this.form.json).every((val) => val == null)) {
            this.getImageList([{
                name: "sfzimgb",
                url: this.form.sfzimgb
            }])
        }
        if (!(this.form.json1) || Object.values(this.form.json1).every((val) => val == null)) {
            this.getImageList([{
                name: "sfzimgz",
                url: this.form.sfzimgz
            }])
        }
        if (!(this.form.json2) || Object.values(this.form.json2).every((val) => val == null)) {
            this.getImageList([{
                name: "jszz",
                url: this.form.jszz
            }])
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.item {
    width: 100%;

    &>.el-form {
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            width: 33%;
        }

        .tool {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .sureBtn {
                width: 250px;
            }
        }
    }

    .imgs-box {
        width: 100%;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;


        &>.box {
            width: 50%;
            display: flex;
            white-space: nowrap;
            margin: 10px 0;

            ::v-deep .el-image {
                width: 300px;
                height: 250px;
                border-radius: 6px;
            }

            &>div:first-child {
                width: 112px;
            }

            &>.info-box {
                width: 300px;
                height: 100%;

                ::v-deep .el-form-item {
                    margin-bottom: 5px;
                }
            }
        }


    }
}

::v-deep .el-form-item__content {
    display: flex;
    height: 100%;

    .custom-input {
        width: 100%;
    }

    .el-select {
        width: 100%;
    }

    .el-input {
        width: 100%;
    }

    .el-button {
        margin-left: 20px;
        background-color: $theme-primary;
        color: #fff;
        border: none;
        // border-radius: 20px;
    }

    .el-radio {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>